<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css动画</title>
    <link rel="stylesheet" href="../../vue文件/animate.css">
</head>
<style>
    

  /* 动画开始前和结束后 */
    .my-enter,
    .my-leave-to{
        transform: translateX(100px);
        opacity: 0;
    }
    /* 进入过渡生效时的状态和离开过渡生效时的状态 */
    .my-enter-active,
    .my-leave-active
    {
        transition: all 5s ease;
        
    }





    .v-enter,
    .v-leave-to{
        transform: translatey(100px);
        opacity: 0;
    }
    /* 进入过渡生效时的状态和离开过渡生效时的状态 */
    .v-enter-active,
    .v-leave-active
    {
        transition: all 5s ease;
        
    }
    
</style>
<body>
    <div id="app">
        <button @click='flag=!flag'>点击1</button>
         <transition name="my">
            <h3 v-if="flag" >我是h3</h3>
         </transition>

         <hr>

         <button @click="flag2=!flag2">点击2</button>

        <transition >
            <h1 v-show="flag2" >我是h1</h1>
         </transition>
    </div>
</body>
<script src='../../vue文件/vue.js '></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            flag:false,
            flag2:false
        },
        methods: {}
    })
</script>
</html>
